.ui-tab {
    display: flex;
    flex-direction: column;
    height: 100%;

    .ui-tab-container {
        position: relative;
        flex: 1;
    }
    .cont {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;


        .book-index {
            background-color: #F9F9F9;
        }
        .book-index,
        .ui-mobile-book {
            position: absolute;
            display: inline-block;
            width: px2rem(200px);
            height: 100%;
            top: 0;
            left: 0;
        }
        .index-item {
            height: px2rem(80px);
            line-height: px2rem(80px);
            text-align: center;
        }
        .ui-mobile-book {
            width: unset;
            left: px2rem(200px);
            right: 0;

            .ui-mobile-book-body {
                .book-item {
                    height: px2rem(80px);
                    line-height: px2rem(80px);
                    border-bottom: px2rem(1px) solid #ECECEC;
                    box-sizing: border-box;
                    padding-left: px2rem(36px);
                }
                .book-item-title {
                    font-size: px2rem(26px);
                    height: px2rem(76px);
                    line-height: px2rem(76px);
                    text-align: center;
                }
                strong.book-item {
                    height: px2rem(62px);
                    line-height: px2rem(62px);
                    background-color: #F9F9F9;
                    color: #999999;
                }
            }
        }
        .day-title {
            height: px2rem(62px);
            line-height: px2rem(62px);
            display: flex;
            background-color: #F9F9F9;
            color: #999999;

            li {
                flex: 1;
                text-align: center;
            }
        }
        .day-select.ui-mobile-book {
            top: px2rem(62px);
            bottom: px2rem(100px);;
            left: 0;
            right: 0;
            height: auto;

            .ui-mobile-book-body {
                font-size: 0;
            }
            strong.book-item {
                height: 0;
                font-size: 0;
            }
            .ui-monthview {
                width: 100%;
                border-bottom: 1px solid #ECECEC;

                table {
                    width: 100%;
                    padding: 0;
                    border: 0;
                    border-collapse: separate;
                    border-spacing: 0 px2rem(10px);

                    thead {
                        display: none;
                    }

                    tr {
                        font-size: 0;

                        td {
                            font-size: px2rem(26px);
                            color: #333333;
                            height: px2rem(100px);
                            line-height: px2rem(100px);
                        }
                        td.ui-monthview-date-range {
                            background-color: rgba(251, 174, 56, 0.5);
                            color: #333333;
                        }
                        td.ui-monthview-date-selected,
                        td.ui-monthview-date-range.ui-monthview-date-selected,
                        td:hover {
                            background-color: #FBAE38;
                            color: #fff;
                        }
                        td.ui-monthview-date-range.ui-disabled.ui-extra,
                        td.ui-disabled.ui-extra {
                            font-size: 0;
                            background-color: #fff;
                            color: #fff;
                        }
                    }
                }
            }
        }
        .day-preview {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: px2rem(100px);
            line-height: px2rem(100px);
            font-size: 0;
            overflow: hidden;

            .start,
            .end {
                margin-left: px2rem(47px);
                margin-right: px2rem(250px);
                height: px2rem(40px);
                line-height: px2rem(40px);
                color: #666666;
                font-size: px2rem(26px);
            }
            .start {
                margin-top: px2rem(10px);
            }
            .sure {
                position: absolute;
                top: 0;
                right: 0;
                width: px2rem(250px);
                height: px2rem(100px);
                line-height: px2rem(100px);
                text-align: center;
                background-color: #FBAE38;
                color: #fff;
                font-size: px2rem(26px);
            }
            &:before {
                content: ' ';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: px2rem(1px);
                background-color: #ECECEC
            }
        }
    }

}